<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card shadow="never">
        <!-- 面包屑 -->
        <el-breadcrumb v-if="crumbs" separator-class="el-icon-arrow-right">
          <el-breadcrumb-item>学科管理</el-breadcrumb-item>
          <el-breadcrumb-item>{{ headline }}</el-breadcrumb-item>
          <el-breadcrumb-item>标签管理</el-breadcrumb-item>
        </el-breadcrumb>

        <!-- 表单 -->
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
          <el-form-item label="标签名称">
            <el-input v-model="formInline.user"></el-input>
          </el-form-item>
          <el-form-item label="状态">
            <el-select v-model="formInline.region" placeholder="请选择">
              <el-option label="启用" :value="1"></el-option>
              <el-option label="禁用" :value="0"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button @click="clear">清除</el-button>
            <el-button type="primary" @click="search">搜索</el-button>
          </el-form-item>

          <el-button style="float: right" type="success" @click="opendialog"
            ><i class="el-icon-edit"></i>新增标签</el-button
          >
          <router-link to="/subjects/list" v-if="crumbs"
            ><el-button style="float: right" type="text"
              ><i class="el-icon-back"></i>返回学科</el-button
            ></router-link
          >
        </el-form>
        <!-- 提示数据 -->
        <el-alert
          :title="'数据一共' + total + '条'"
          type="info"
          :closable="false"
          show-icon
          style="marginbottom: 15px"
        ></el-alert>

        <!-- 表格 -->
        <el-table
          :data="list"
          style="width: 100%"
          :header-cell-style="{ background: '#fafafa' }"
        >
          <el-table-column
            prop="id"
            type="index"
            label="序号"
            width="80"
          ></el-table-column>
          <el-table-column
            prop="subjectName"
            label="所属学科"
            width="180"
          ></el-table-column>
          <el-table-column
            prop="tagName"
            label="标签名称"
            width="180"
          ></el-table-column>
          <el-table-column
            prop="username"
            label="创建者"
            width="180"
          ></el-table-column>
          <el-table-column prop="addDate" label="创建日期" width="180">
            <template #default="{ row }">
              {{ formatDate(row.addDate) }}
            </template>
          </el-table-column>
          <el-table-column prop="state" label="状态">
            <template #default="{ row }">{{
              row.state === 1 ? '已启用' : '已禁用'
            }}</template>
          </el-table-column>
          <el-table-column label="操作" width="180">
            <template #default="{ row }">
              <div v-show="row.state !== 1">
                <el-button type="text" @click="stateChange(row)"
                  >启用</el-button
                >
                <el-button type="text" @click="opendialog(row, 'revam')"
                  >修改</el-button
                >
                <el-button type="text" @click="removedata(row)">删除</el-button>
              </div>
              <div v-show="row.state === 1">
                <el-button type="text" @click="stateChange(row)"
                  >禁用</el-button
                >
                <el-button type="text" disabled>修改</el-button>
                <el-button type="text" disabled>删除</el-button>
              </div>
            </template>
          </el-table-column>
        </el-table>

        <!-- 分页 -->
        <el-row type="flex" justify="end" style="margin-top: 15px">
          <el-pagination
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            layout=" prev, pager, next, sizes, jumper"
            :total="total"
            :page-sizes="[5, 10, 20, 50]"
            :page-size="tags.pagesize"
          >
          </el-pagination>
        </el-row>
      </el-card>

      <!-- 新增标签弹窗 -->
      <el-dialog
        class="dialogClass"
        :title="form.id ? '修改标签' : '新增标签'"
        :visible.sync="dialogVisible"
        width="30%"
        :before-close="handleClose"
      >
        <span>
          <el-form
            ref="form"
            :rules="rulesverify"
            :model="form"
            label-width="80px"
          >
            <el-form-item v-if="!crumbs" label="所属学科" prop="subjectID">
              <el-select
                v-model="form.subjectID"
                placeholder="请选择活动区域"
                style="width: 100%"
              >
                <el-option
                  v-for="item in whatsubjects"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="目录名称" prop="tagName">
              <el-input v-model="form.tagName"></el-input>
            </el-form-item>
          </el-form>
        </span>
        <span slot="footer" class="dialog-footer">
          <el-button @click="cataloguecall">取 消</el-button>
          <!-- 添加 -->
          <el-button type="primary" @click="addcatalogue">确 定</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import {
  list as getList,
  add,
  update,
  remove,
  changeState,
  simple
} from '@/api/hmmm/tags.js'
import dayjs from 'dayjs'

export default {
  data () {
    return {
      // 学科具体名称
      headline: '',
      // 学科跳转过来携带的 id
      whatsubjects: [],
      subjectsname: '',
      // 表单的内容
      formInline: {
        user: '',
        region: ''
      },
      // 获取数据的参数
      tags: {
        pagesize: 5,
        page: 1
      },
      // 总页数
      total: 0,
      // revamp:1,
      // 数据列表
      list: [],
      // 控制路径隐藏
      crumbs: false,
      // 修改状态的参数
      changestate: {},
      // 控制新增标签弹窗的显示与隐藏
      dialogVisible: false,
      // 弹窗数据
      form: {
        subjectID: '',
        tagName: ''
      },
      //新增的表单校验
      rulesverify: {
        tagName: [
          {
            required: true,
            message: '请输入名称',
            trigger: ['change', 'blur']
          },
          {
            min: 2,
            max: 8,
            message: '长度在 2 到 8 个字符',
            trigger: ['change', 'blur']
          }
        ],
        subjectID: [
          {
            required: true,
            message: '学科不能为空',
            trigger: ['change', 'blur']
          }
        ]
      }
    }
  },
  // 钩子函数，渲染页面
  created () {
    this.getList(this.tags)
    this.simpless()
  },
  methods: {
    // 获取数据的前置工作
    async getList (data) {
      // 如果有数据就是学科跳转过来的
      if (this.$route.query.id) {
        // 将学科传递过来的参数赋值给数据项
        this.subjectsname = +this.$route.query.id
        // 隐藏内容显示
        this.crumbs = true
        // 给弹窗表单的隐藏数据项默认为跳转过来的数据

        this.form.subjectID = this.subjectsname
        // 请求默认携带跳转过来的数据
        this.tags.subjectID = this.subjectsname
      }
      // 发送请求获取数据
      this.twogaindata(this.tags)
    },
    //获取数据的方法
    async twogaindata (data) {
      // 获取数据
      const res = await getList(data)
      this.list = res.data.items
      this.total = res.data.counts
    },
    // 页码值发生变化，回调函数
    handleSizeChange (val) {
      this.tags.pagesize = val
      this.getList(this.tags)
    },
    handleCurrentChange (val) {
      this.tags.page = val
      this.getList(this.tags)
    },
    // 时间转换的方法
    formatDate (dateValue) {
      return dayjs(dateValue).format('YYYY-MM-DD HH:mm:ss')
    },
    //点击X和蒙版关闭弹窗
    handleClose (done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done()
        })
        .catch(_ => {})
      // 清除校验/重置表单
      this.$refs.form.resetFields()
      this.form = {
        subjectID: '',
        tagName: ''
      }
    },
    //清除的方法
    clear () {
      this.formInline = {
        user: '',
        region: ''
      }
    },
    // 添加弹窗
    async addcatalogue () {
      // 判断是否有值
      if (this.$route.query.id) {
        this.form.subjectID = this.subjectsname
        this.tags.subjectID = this.subjectsname
      }
      // 兜底校验
      this.$refs.form.validate(async valid => {
        if (valid) {
          // 校验成功
          if (this.form.id) {
            // 有数据就是修改
            // 发起请求
            const res = await update(this.form)
            // 提示用户
            this.$message.success('修改成功')
          } else {
            // 没有就是添加
            // 发起请求
            const res = await add(this.form)
            // 提示用户
            this.$message.success('添加成功')
          }

          // 重新渲染页面
          this.getList(this.tags)
          // 关闭弹窗
          this.dialogVisible = false
          // 清除校验/重置表单
          this.form = {
            subjectID: '',
            tagName: ''
          }
          this.$refs.form.resetFields()
        } else {
          return
        }
      })
    },
    // 点击弹窗中的取消按钮
    cataloguecall () {
      // 关闭弹窗
      this.dialogVisible = false
      // 清除校验/重置表单
      this.$refs.form.resetFields()
      // 清空表单
      this.form = {
        subjectID: '',
        tagName: ''
      }
    },
    //打开弹窗的方法
    async opendialog (data, one) {
      // 如果有参数就是修改
      if (one) {
        // 打开弹窗
        this.dialogVisible = true
        // 数据回显
        this.form.id = data.id
        this.form.subjectID = data.subjectID
        this.form.tagName = data.tagName
      } else {
        // 如果没有参数就是添加
        // 打开弹窗
        this.dialogVisible = true
      }
    },
    //点击删除的方法
    removedata (data) {
      // 提示
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
          // 删除方法
          await remove(data)
          // 重新渲染页面
          this.getList(this.tags)
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    // 修改状态的方法
    async stateChange (data) {
      this.changestate.id = data.id
      if (data.state) {
        this.changestate.state = 0
      } else {
        this.changestate.state = 1
      }
      await changeState(this.changestate)
      this.getList(this.tags)
    },
    // 搜索功能
    search () {
      if (this.formInline.user === '' && this.formInline.region === '') {
        this.gaindata(this.tags)

        this.tags = {
          page: 1,
          pagesize: 5
        }
      } else if (this.formInline.user !== '' && this.formInline.region !== '') {
        this.tags.tagName = this.formInline.user
        this.tags.state = this.formInline.region
        this.getList(this.tags)

        this.tags = {
          page: 1,
          pagesize: 5
        }
      } else if (this.formInline.user !== '' && this.formInline.region === '') {
        this.tags.tagName = this.formInline.user
        this.getList(this.tags)

        this.tags = {
          page: 1,
          pagesize: 5
        }
      } else if (this.formInline.user === '' && this.formInline.region !== '') {
        this.tags.state = this.formInline.region
        this.getList(this.tags)

        this.tags = {
          page: 1,
          pagesize: 5
        }
      }
    },
    // 学科标签
    async simpless () {
      const res = await simple()
      this.whatsubjects = res.data
      // 学科传过来的数据
      // 如果是学科跳转过来的执行这个方法
      // this.subjectsname 暂定这个为学科的数据
      const name = this.subjectsname
      this.whatsubjects.map(item => {
        if (item.value == name) {
          this.headline = item.label
        }
      })
    }
  }
}
</script>

<style scoped>
.el-breadcrumb {
  border-bottom: 1px solid #ebeef5;
  height: 30px;
  margin-bottom: 20px;
}

.dialogClass >>> .el-dialog__footer {
  display: flex;
  justify-content: end;
}
</style>
